<template>
    <div>
        <el-container style="line-height: 30px;">
            <el-header style="text-align:left; font-size: 15px;height: 30px;border-radius: 15px;background-color: #d7d7ff;">
                房屋信息
            </el-header>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
        <div>
            <el-form :inline="true" style="float: left">
                <!--      模糊-->
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search"
                            class="search_payinfo"
                            size="mini"
                            placeholder="缴费查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search1"
                            class="search_waterb"
                            size="mini"
                            placeholder="水表号查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-input
                            @keyup.native="onSearch"
                            v-model="search2"
                            class="search_fwzt"
                            size="mini"
                            placeholder="房屋状态查询">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button
                            class="el-icon-refresh"
                            type="text"
                            @click="refreshData">刷新
                    </el-button>
                </el-form-item>
                <!--      增加-->
                <el-form-item>
                    <el-button
                            class="el-icon-circle-plus-outline"
                            type="text"
                            @click="dialogVisible = true">添加
                    </el-button>
                    <el-button
                            class="el-icon-delete"
                            type="text"
                            @click="deleteAll(sels)"> 批量删除
                    </el-button>
                </el-form-item>
            </el-form>
            <el-table :data="users.slice((currentPage-1)*pagesize,currentPage*pagesize)" border stripe @selection-change="selsChange">
                <el-table-column label="序号" prop="hid" />
                <el-table-column type="selection" width="55" />//复选框
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleEdit(scope.row)">编辑
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="房号" prop="fh"/>
                <el-table-column label="所属楼栋" prop="binfo.bname"/>
                <el-table-column label="水表号" prop="waterb"/>
                <el-table-column label="水表位置" prop="watersite"/>
                <el-table-column label="电表位置" prop="dbsite"/>
                <el-table-column label="实测面积" prop="realarea"/>
                <el-table-column label="收费面积" prop="sfarea"/>
                <el-table-column label="房屋状态" prop="fwzt"/>
                <el-table-column label="物业费承担情况" prop="payinfo"/>
                <el-table-column label="交费时间" prop="paytime"/>
                <el-table-column label="买房时间" prop="buyftime"/>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                icon="el-icon-delete"
                                @click="handleDelete(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[3, 6, 9, 12]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>
            <!--添加页面-->
            <el-dialog
                    title="添加页面"
                    :visible.sync="dialogVisible"
                    width="30%"
            >
                <el-form style="width: 40%" :model="ruleForm1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
                    <!--        <el-form-item label="客户订单编号" prop="id">-->
                    <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                    <!--        </el-form-item>-->
                    <!--      </el-form-item>-->
                    <el-form-item label="房号" prop="fh">
                        <el-input v-model="ruleForm1.fh" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="楼栋名称" prop="bid">
                        <el-select  v-model="ruleForm1.bid" style="width: 300px">
                            <el-option v-for="item in usb" :key="item.bid" :label="item.bname" :value="item.bid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="水表号" prop="waterb">
                        <el-input v-model="ruleForm1.waterb" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="水表位置" prop="watersite">
                        <el-input v-model="ruleForm1.watersite" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="电表位置" prop="dbsite">
                        <el-input v-model="ruleForm1.dbsite" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="实测面积" prop="realarea">
                        <el-input v-model="ruleForm1.realarea" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="收费面积" prop="sfarea">
                        <el-input v-model="ruleForm1.sfarea" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋状态" prop="fwzt">
                        <el-input v-model="ruleForm1.fwzt" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="物业为承担情况" prop="payinfo">
                        <el-input v-model="ruleForm1.payinfo" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="缴费时间" prop="paytime">
                        <el-input v-model="ruleForm1.paytime" style="width: 300px"></el-input>
                    </el-form-item>
                    <el-form-item label="买房时间" prop="buyftime">
                        <el-input v-model="ruleForm1.buyftime" style="width: 300px"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
          <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="addUser()" type="primary" size="medium">确 定</el-button>
          </span>
  </span>
            </el-dialog>
            <!--修改页面-->
            <el-form :model="ruleForm" ref="ruleForm" label-width="70px" class="demo-ruleForm" size="medium">
                <el-dialog
                        title="编辑"
                        :append-to-body='true'
                        :visible.sync="dialogUpdate"
                        width="30%"
                >
                    <el-form style="width: 40%" :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <!--        <el-form-item label="客户订单编号" prop="id">-->
                        <!--          <el-input v-model="formInline.id" style="width: 300px"></el-input>-->
                        <!--        </el-form-item>-->

                        <!--      </el-form-item>-->
                        <el-form-item label="序号" prop="hid">
                            <el-input v-model="ruleForm.hid" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="房号" prop="fh">
                            <el-input v-model="ruleForm.fh" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="楼栋名称" prop="bid">
                            <el-select  v-model="ruleForm.bid" style="width: 300px">
                                <el-option v-for="item in usb" :key="item.bid" :label="item.bname" :value="item.bid"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="水表号" prop="waterb">
                            <el-input v-model="ruleForm.waterb" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="水表位置" prop="watersite">
                            <el-input v-model="ruleForm.watersite" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="电表位置" prop="dbsite">
                            <el-input v-model="ruleForm.dbsite" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="实测面积" prop="realarea">
                            <el-input v-model="ruleForm.realarea" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="收费面积" prop="sfarea">
                            <el-input v-model="ruleForm.sfarea" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="房屋状态" prop="fwzt">
                            <el-input v-model="ruleForm.fwzt" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="物业为承担情况" prop="payinfo">
                            <el-input v-model="ruleForm.payinfo" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="缴费时间" prop="paytime">
                            <el-input v-model="ruleForm.paytime" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="买房时间" prop="buyftime">
                            <el-input v-model="ruleForm.buyftime" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
     <span slot="footer" class="dialog-footer">
            <el-button @click="cancel()" size="medium">取 消</el-button>
            <el-button @click="updateUser()" type="primary" size="medium">确 定</el-button>
          </span>
          </span>
                </el-dialog>
            </el-form>
            <br>


        </div>
    </div>
</template>

<script>
    export default {
        name: "fwxx",
        inject: ['reload'],
        data(){
            return{
                schArr: [], // 分页数据源
                pagesize: 3,
                currentPage: 1,
                total: 0,
                tableData: [],
                sels: [],//选中的值显示
                search: '',
                search1: '',
                search2: '',
                dialogVisible: false,
                dialogUpdate: false,
                disablePage: false,
                ruleForm: {
                    tableData: [],
                    search: '',
                    dialogVisible: false,
                    dialogUpdate: false,
                    disablePage: false
                },
                ruleForm1: {
                    tableData: [],
                    dialogVisible: false,
                    dialogUpdate: false,
                    disablePage: false
                },
                users:{},
                usb:{bid:'',bname:''}
            }
        },
        created () {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8085/Hm/select')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                }),this.axios.get('http://localhost:8085/Tinfo/selectBinfo')
                .then(function (response) {
                    console.log(response);
                    that.usb = response.data;
                })
        },
        methods: {
            handleSizeChange(val) {
                this.getPageData();
                var s = this
                console.log(`每页 ${val} 条`);
                s.pagesize = val;
                s.getPageData();
                console.log(s.pagesize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                var ss = this
                console.log(`当前页: ${val}`);
                ss.currentPage = val;
                ss.getPageData();
                console.log(ss.currentPage);
            },
            getPageData() {
                console.log("是否yes");
                var thats = this
                let start = (this.currentPage - 1) * this.pagesize;
                let end = start + this.pagesize;
                this.schArr = thats.users.slice(start, end);
                this.total = thats.users.length;
            },
            handleEdit(row) {
                this.dialogUpdate = true;
                this.ruleForm = Object.assign({}, row); //这句是关键！！！
            },
            handleDelete(row) {
                this.$confirm('删除操作, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let postData = this.qs.stringify({
                        hid: row.hid,
                    });
                    this.axios({
                        method: 'post',
                        url:'http://localhost:8085/Hm/delete',
                        data:postData
                    }).then(response =>
                    {
                        this.getPages();
                        this.currentPage = 1;
                        this.axios.post('http://localhost:8085/Hm/select').then(response =>
                        {
                            this.tableData = response.data;
                        }).catch(error =>
                        {
                            console.log(error);
                        });
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        console.log(response);
                        location.reload()
                    }).catch(error =>
                    {
                        console.log(error);
                    });

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            selsChange(sels) {
                this.sels = sels
            },

            deleteAll() {
                var ids= this.sels.map(item => item.hid).join()//获取所有选中行的id组成的字符串，以逗号分隔
                console.log(ids);
                this.$confirm('此操作将永久删除该文件及其子文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                        this.axios.post('http://localhost:8085/Hm/deleteAll?ids='+ids);
                        location.reload();
                        console.log("删除成功")
                    }
                )
            },

            cancel() {
                this.dialogUpdate = false;
                this.dialogVisible = false;
                this.emptyUserData();
            },
            emptyUserData(){
                this.ruleForm = {
                    fh: this.ruleForm.fh,
                    bid: this.ruleForm.bid,
                    waterb: this.ruleForm.waterb,
                    watersite: this.ruleForm.watersite,
                    dbsite: this.ruleForm.dbsite,
                    realarea: this.ruleForm.realarea,
                    sfarea: this.ruleForm.sfarea,
                    fwzt: this.ruleForm.fwzt,
                    payinfo: this.ruleForm.payinfo,
                    paytime: this.ruleForm.paytime,
                    buyftime: this.ruleForm.buyftime,
                }
            },
            addUser() {
                let postData = this.qs.stringify({
                    fh: this.ruleForm1.fh,
                    bid: this.ruleForm1.bid,
                    waterb: this.ruleForm1.waterb,
                    watersite: this.ruleForm1.watersite,
                    dbsite: this.ruleForm1.dbsite,
                    realarea: this.ruleForm1.realarea,
                    sfarea: this.ruleForm1.sfarea,
                    fwzt: this.ruleForm1.fwzt,
                    payinfo: this.ruleForm1.payinfo,
                    paytime: this.ruleForm1.paytime,
                    buyftime: this.ruleForm1.buyftime,

                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8085/Hm/add',
                    data:postData
                }).then(response =>
                {
                    this.axios.post('http://localhost:8085/Hm/select').then(response =>
                    {
                        this.tableData = response.data;
                        this.currentPage = 1;
                        this.$message({
                            type: 'success',
                            message: '已添加!'
                        });
                    }).catch(error =>
                    {
                        console.log(error);
                    });
                    this.getPages();
                    this.dialogVisible = false
                    console.log(response);
                    location.reload()
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            updateUser() {
                let postData = this.qs.stringify({
                    hid: this.ruleForm.hid,
                    fh: this.ruleForm.fh,
                    bid: this.ruleForm.bid,
                    waterb: this.ruleForm.waterb,
                    watersite: this.ruleForm.watersite,
                    dbsite: this.ruleForm.dbsite,
                    realarea: this.ruleForm.realarea,
                    sfarea: this.ruleForm.sfarea,
                    fwzt: this.ruleForm.fwzt,
                    payinfo: this.ruleForm.payinfo,
                    paytime: this.ruleForm.paytime,
                    buyftime: this.ruleForm.buyftime,

                });
                this.axios({
                    method: 'post',
                    url:'http://localhost:8085/Hm/update',
                    data:postData
                }).then(response =>
                {
                    this.handleCurrentChange();
                    this.cancel();
                    this.$message({
                        type: 'success',
                        message: '更新成功!',
                    });
                    location.reload();
                    console.log(response);
                }).catch(error =>
                {
                    this.$message({
                        type: 'success',
                        message: '更新失败!'
                    });
                    console.log(error);
                });
            },
            onSearch() {
                let postData = this.qs.stringify({
                    payinfo: this.search,
                    waterb: this.search1,
                    fwzt: this.search2
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8085/Hm/mohu',
                    data: postData
                }).then(response =>
                {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            getPages() {
                this.axios.post('http://localhost:8085/Hm/rows').then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
            refreshData() {
                location.reload();
            }
        },

    }
</script>

<style scoped>

</style>